<template>
	<div class="mycard">
		
		<div class='head'>
            <p class='title-icon'>
            	<a class='iconfont icon-jiantouzuo' href="javascript:history.go(-1)"></a>
            </p>
            <p class='title-text'>我的银行卡</p>
            <p class="title-null"><router-link class='iconfont icon-15' to='/addcard'></router-link></p>
        </div>
        
        <div class="card-box">
        	<p class="card">
        		中国工商银行卡 <span class="card-type">储蓄卡</span>
        		<span class="delete iconfont icon-shanchu"></span>
        	</p>
        	<p class="card-num">
        		**** **** **** 1242
        	</p>
        </div>
	</div>
</template>

<script>
</script>

<style scoped>
	.title-icon > a,.title-null{
		font-size: 1.3rem;
	}
	.title-null{
		color: #71B4EB;
		text-align: right;
	}
	.title-null > a{
		color: #71B4EB;
		font-size: 1.4rem;
	}
	.card-box{
		background-color: #EC6770;
		height: 100px;
		margin:20px auto;
		width: 80%;
		padding: 25px;
		border-radius: 6px;
		color: white;
		line-height: 50px;
	}
	.card-type{
		font-size: .8rem;
	}
	.card{
		position: relative;
	}
	.delete{
		position: absolute;
		right: 0px;
	}
@media (max-width:320px) {
	.card-box{
		height: 60px;
		line-height: 35px;
	}
}
</style>